<template>
	<page-body>
		<view class="page">
			<!---logoflex布局开始-->
			<view class="flex flex-direction flex-wrap align-center justify-center benben-flex-layout login_flex_0">
				<image class='login_fd0_0' mode="aspectFit" v-if="type == 1" :src='STATIC_URL+"111.png"'></image>
				<image class='login_fd0_0' mode="aspectFit" v-if="type == 2" :src='STATIC_URL+"112.png"'></image>
			</view>

			<!---logoflex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout login_flex_1">
				<text class='login_fd1_0'>申请获取以下权限</text>
				<text class='login_fd1_1'>获取你的公开信息（昵称、头像、地区等）</text>
				<!-- #ifdef APP-PLUS || H5 -->
				
				<view class='flex flex-wrap align-center justify-center login_fd1_2' @tap.stop="handleJumpDiy" data-type="redirectTo" 
					:data-url="`/pages/dlzc/verificationLogin/verificationLogin?type=${type}`">
					<text class='login_fd1_2_c0'>手机号一键登录</text>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class='flex flex-wrap align-center justify-center login_fd1_2' @tap.stop="LoginFunc()">
					<text class='login_fd1_2_c0'>手机号一键登录</text>
				</view>
				<!-- #endif -->
				<view class="jinru" @tap.stop="chakan">进入首页</view>
				
			</view>

			<!---flex布局flex布局结束-->
			<view class="flex flex-wrap align-start justify-center benben-position-layout flex login_flex_2">
				<benben-flex-switch-new class-name='flex flex login_fd2_0' v-model="is_tick" :disabled='false'>
					<template v-slot:checked>

						<view class='flex flex position-relative align-center'>
							<image class='login_checkfd2_0_c0_c0' mode="aspectFit" :src='STATIC_URL+"2.png"'></image>
						</view>

					</template>
					<template v-slot:unchecked>

						<view class='flex flex position-relative justify-end align-center'>
							<image class='login_noCheckfd2_0_c1_c0' mode="aspectFit" :src='STATIC_URL+"3.png"'></image>
						</view>

					</template>
				</benben-flex-switch-new>
				<view class='flex flex-wrap align-center login_fd2_1' v-if="type == 1">
					<text class='login_fd2_1_c0' @tap.stop="is_tick = !is_tick">已阅读并同意</text>
					<text class='login_fd2_1_c1' @tap.stop="handleJumpDiy" data-type="navigateTo" 
					:data-url="`/pages/login/agreements/agreements?aid=1`">《用户注册协议》</text>
					<text class='login_fd2_1_c0'>与</text>
					<text class='login_fd2_1_c1' @tap.stop="handleJumpDiy" data-type="navigateTo" 
					:data-url="`/pages/login/agreements/agreements?aid=4`">《隐私协议》</text>
				</view>
				<view class='flex flex-wrap align-center login_fd2_1' v-if="type == 2">
					<text class='login_fd2_1_c0' @tap.stop="is_tick = !is_tick">已阅读并同意</text>
					<text class='login_fd2_1_c1' @tap.stop="handleJumpDiy" data-type="navigateTo" 
					:data-url="`/pages/login/agreements/agreements?aid=3`">《用户注册协议》</text>
					<text class='login_fd2_1_c0'>与</text>
					<text class='login_fd2_1_c1' @tap.stop="handleJumpDiy" data-type="navigateTo" 
					:data-url="`/pages/login/agreements/agreements?aid=6`">《隐私协议》</text>
				</view>

			</view>
			<view :style="{height: '88rpx'}"></view>
			<benben-popup v-model="popupShow1668487447377" :mask="true" mode="center">
				<!---申请获取手机号弹窗flex布局开始-->
				<view class="flex flex-direction flex-wrap align-center clickLogin_flex_2">
					<!-- <image class="clickLogin_fd2_0" mode="aspectFit" :src="STATIC_URL + 'logo.png'"></image> -->
					<image class='clickLogin_fd2_0' mode="aspectFit" v-if="type == 1" :src='STATIC_URL+"111.png"'></image>
					<image class='clickLogin_fd2_0' mode="aspectFit" v-if="type == 2" :src='STATIC_URL+"112.png"'></image>
					<text class="clickLogin_fd2_1">校味购生活</text>
					<text class="clickLogin_fd2_2">申请获取您的手机号</text>
					<view class="flex flex-wrap align-center clickLogin_fd2_3">
						<button class="clickLogin_fd2_3_c0" @tap.stop="popupShow1668487447377 = false">拒绝</button>
						<button class="clickLogin_fd2_3_c1" @tap.stop="popupShow1668487447377 = false"
							open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">允许</button>
					</view>
				</view>
				<!---申请获取手机号弹窗flex布局结束-->
			</benben-popup>


		</view>
	</page-body>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"is_tick": false,
				popupShow1668487447377: false,
				type:1,
				userinfo:{
					code:'',
					iv:'',
					encryptedData:'',
				},
				wxInfo:{
					code:'',
					iv:'',
					encryptedData:'',
				},
				flag:false,
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			if(options.type){
				this.type = options.type
			}
			// else{
			// 	// if()
			// 	this.type = uni.getStorageSync('tabberType')
			// }
			if (global.appTabBarType) this.toHomeDiy()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			chakan(){
				this.$urouter.reLaunch(`/pages/tabBar/index/index`)
			},
			//登录
			LoginFunc() {
				let self = this
				if (this.is_tick === false) {
					this.$message.info('请勾选用户注册协议与隐私政策');
					return false;
				}
				let that = this;
				uni.getUserProfile({
					desc: "用于完善会员资料",
					success: (infoRes) => {
						console.log('infoRes', infoRes);
						uni.login({
							success: (res) => {
								console.log(res, 12345);
								// return
								// const code = res.code;
								that.wxInfo.code = res.code;
								that.wxInfo.iv = infoRes.iv;
								that.wxInfo.encryptedData = infoRes.encryptedData;
								console.log(that.wxInfo, "用户信息");
								// 开始注册账号，第一次登录
								that.handlerLogin();
							},
							fail: (err) => {
								console.log("ERROR", err);
								that.$message.info("获取用户授权失败");
								uni.hideLoading();
							},
						});
					},
					fail: (err) => {
						console.log("ERROR", err);
						uni.hideLoading();
					},
				});
			},
			async handlerLogin() {
				if (this.flag) return;
				uni.showLoading();
				this.flag = true;
				let extend_info = {
					code:this.wxInfo.code,
					iv: this.wxInfo.iv,
					encryptedData: this.wxInfo.encryptedData
				}
				let dataUserInfoData = await this.$api.post(global.apiUrls.post5d7660a421e69, {
					extend_info:JSON.stringify(extend_info),
					// code: this.wxInfo.code,
					// encryptedData: this.wxInfo.encryptedData,
					// iv: this.wxInfo.iv,
					// user_type: 1,
					type:'wx_miniapp'
				});
				uni.hideLoading();
				this.flag = false;
				if (dataUserInfoData.data.code == 200) {
					this.popupShow1668487447377 = true;
					console.log('dataUserInfoData', dataUserInfoData.data.data);
					this.wxInfo.openId = dataUserInfoData.data.data.result.openid;
					this.wxInfo.unionid = dataUserInfoData.data.data.result.unionid;
					return;
				}
				if (dataUserInfoData.data.code != 1) {
					this.$message.info(dataUserInfoData.data.msg);
					return;
				}
				uni.setStorageSync('tabberType', this.type)
				let dataUserInfoinfo = dataUserInfoData.data.data.userinfo;
			
				this.$store.commit('updateUserInfo', dataUserInfoinfo);
				this.$store.commit('saveToken', dataUserInfoinfo.user_token);
				// this.$urouter.reLaunch(`/pages/tabBar/index/index`)
				this.$urouter.navigateBack(1);
			},
			async getPhoneNumber(e) {
				// console.log('e.detail', e.detail);
				// const loginResult = await uni.login();
				// const {
				// 	code
				// } = loginResult[1];
				this.userinfo.code = e.detail.code;
				this.userinfo.encryptedData = encodeURIComponent(e.detail.encryptedData);
				this.userinfo.iv = encodeURIComponent(e.detail.iv);
				// this.popupShow1668487249311 = true;
				this.toRegister()
				// }
			
			},
			// 去注册
			async toRegister() {
			
				// console.log('wxInfo', this.wxInfo);
				let page = {
					code:this.userinfo.code,
					iv: this.userinfo.iv,
					encryptedData: this.userinfo.encryptedData,
					
				}
				let dataUserInfoData = await this.$api.post(global.apiUrls.post5d7757d28d076, {
					account_type:'mobile',
					third_type:'wx_miniapp',
					extend_info:JSON.stringify(page),
					openid: this.wxInfo.openId,
					unionid:this.wxInfo.unionid
					// ...this.userinfo,
					// wxinfo: JSON.stringify({
					// 	gender: this.wxInfo.gender,
					// 	openId: this.wxInfo.openId
					// }),
					// invite_code: this.invite_code,
					// user_type: 1,
				});
				if (dataUserInfoData.data.code != 1) {
					this.$message.info(dataUserInfoData.data.msg);
					return;
				}
				let dataUserInfoinfo = dataUserInfoData.data.data.userinfo;
				this.$store.commit('updateUserInfo', dataUserInfoinfo);
				this.$store.commit('saveToken', dataUserInfoinfo.user_token);
				uni.setStorageSync('tabberType', this.type)
				// this.$urouter.reLaunch(`/pages/tabBar/index/index`)
				this.$urouter.navigateBack(1);
			
			},
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: url(image-path('1.png')) no-repeat, rgba(255, 255, 255, 1);
		background-size: 100% auto;
	}

	.login_flex_0 {
		padding: 260rpx 0rpx 121rpx 0rpx;
	}

	.login_fd0_0 {
		width: 180rpx;
		height: 180rpx;
		border-radius: 48rpx;
	}

	.login_flex_1 {
		padding: 0rpx 56rpx 0rpx 56rpx;
	}

	.login_fd1_2_c0 {
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 45rpx;
	}

	.login_fd1_2 {
		background: #FF8E21;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		width: 638rpx;
		height: 88rpx;
	}

	.login_fd1_1 {
		color: #333333;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 45rpx;
		margin: 0rpx 0rpx 48rpx 0rpx;
	}

	.login_fd1_0 {
		color: #333333;
		font-size: 36rpx;
		font-weight: 700;
		line-height: 50rpx;
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.login_flex_2 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
	}

	.login_fd2_1_c1 {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(43, 165, 255, 1);
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
	}

	.login_fd2_1_c0 {
		font-size: 24rpx;
		font-weight: 400;
		color: var(--benbenFontColor1);
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
	}

	.login_fd2_1 {
		margin: 0rpx 0rpx 0rpx 0rpx;
	}

	.login_noCheckfd2_0_c1_c0 {
		width: 32rpx;
		height: 32rpx;
	}

	.login_checkfd2_0_c0_c0 {
		width: 32rpx;
		height: 32rpx;
		margin: 6rpx 0rpx 0rpx 0rpx;
	}

	::v-deep .login_fd2_0 {
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.clickLogin_flex_2 {
		background: #fff;
		background-size: 100% !important;
		margin: 0rpx 85rpx 0rpx 85rpx;
		background-size: #eee;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		padding: 48rpx 0rpx 0rpx 0rpx;
	}

	.clickLogin_fd2_0 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.clickLogin_fd2_1 {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 35rpx;
		color: #333333;
		margin: 24rpx 0rpx 0rpx 0rpx;
	}

	.clickLogin_fd2_2 {
		margin: 12rpx 0rpx 32rpx 0rpx;
	}

	.clickLogin_fd2_3_c1 {
		background: transparent;
		background-size: 100% !important;
		line-height: 45rpx;
		border-radius: 0rpx 0rpx 16rpx 0rpx;
		font-size: 32rpx;
		color: rgba(51, 51, 51, 1);
		padding: 24rpx 113rpx 24rpx 109rpx;
	}

	.clickLogin_fd2_3_c0 {
		border-right: 1px solid #eeeeee;
		background: transparent;
		background-size: 100% !important;
		line-height: 45rpx;
		border-radius: 0rpx 0rpx 0rpx 16rpx;
		font-size: 32rpx;
		color: rgba(153, 153, 153, 1);
		padding: 24rpx 113rpx 24rpx 113rpx;
	}

	.clickLogin_fd2_3 {
		border-top: 1px solid #eee;
	}
	.jinru{
		width: 100%;
		text-align: center;
		margin: 24rpx 0 0 0; 
	}
</style>
